<template>
  <div>
    <div class="map-switch">
      <label>夜间模式&nbsp;</label>
      <el-switch
        v-model="switch_model"
        on-color="#00bfa5"
        off-color="#e5e5e5"
        on-text="开"
        off-text="关"
        on-value="dark"
        off-value="light"
        @change="changeStyle"
      />
    </div>
    <div class="map-switch" style="display: none;margin-top: 8px">
      <label>热力图&nbsp;&nbsp;&nbsp;</label>
      <el-switch
        v-model="switch_hot"
        on-color="#00bfa5"
        off-color="#e5e5e5"
        on-text="开"
        off-text="关"
        on-value="dark"
        off-value="light"
        @change="changeHot"
      />
    </div>
  </div>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
        switch_model: false,
        switch_hot: false
      }
    },
    mounted() {

    },
    methods: {
      changeStyle(val) {
        this.switch_model = val;
        this.$emit('changeMapStyle', val)
      },
      changeHot(val) {
        this.switch_hot = val;
        this.$emit('changeHotStyle', val)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" rel="stylesheet/scss">
  .map-switch {
    height: 35px;
    line-height: 35px;
    width: 140px;
    text-align: center;
    font-size: 12px;
    border-radius: 20px;
    background: #fff;
    display: inline-block;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
    color: #00bfa5;
    font-weight: 700;
  }
</style>
